<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorate="body/main">
<head>
    <meta charset="UTF-8">
    <title>客户关系管理系统</title>
</head>
<body>
<div class="right_col" role="main" layout:fragment="content">
    <div class="">
        <div class="clearfix"></div>
        <div class="row">
            <div class="col-md-12">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>
                            订单详情 <i class="fa fa-user"></i><small th:text="${session.loginUser.usrName }">用户名</small>
                        </h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <form>
                            <ul>
                                <li>
                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">订单编号</label>
                                        <div class="col-md-7 col-sm-7 col-xs-12">
                                            <input name="odrId" id="odrId" type="text" class="form-control col-md-7 col-xs-12" readonly>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">日期</label>
                                        <div class="col-md-7 col-sm-7 col-xs-12">
                                            <input name="odrDate" id="odrDate" type="text" class="form-control col-md-7 col-xs-12" readonly>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">送货地址</label>
                                        <div class="col-md-7 col-sm-7 col-xs-12">
                                            <input name="odrCustomer" id="odrCustomer" type="text" class="form-control col-md-7 col-xs-12" readonly>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">总金额（元）</label>
                                        <div class="col-md-7 col-sm-7 col-xs-12">
                                            <input name="sum" id="sum" type="text" class="form-control col-md-7 col-xs-12" readonly>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="form-group">
                                        <label class="control-label col-md-3 col-sm-3 col-xs-12">状态</label>
                                        <div class="col-md-7 col-sm-7 col-xs-12">
                                            <input name="odrStatus" id="odrStatus" type="text" class="form-control col-md-7 col-xs-12" readonly>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                    <div class="x_content">
                        <p class="text-muted font-13 m-b-30"></p>
                        <div id="datatable-responsive_wrapper"
                             class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                            <div class="row">
                                <div class="col-sm-12">
                                    <a onclick="history.back()" class="btn btn-success btn-sm" >返回</a>
                                    <table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline collapsed"
                                           cellspacing="0" width="100%" role="grid" aria-describedby="datatable-responsive_info" style="width: 100%;">
                                        <thead>
                                        <tr role="row">
                                            <th class="sorting_asc" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="First name: activate to sort column descending"
                                                aria-sort="ascending">商品</th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                数量</th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                单位</th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                单价（元）</th>
                                            <th class="sorting" tabindex="0"
                                                aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                aria-label="Last name: activate to sort column ascending">
                                                金额（元）</th>
                                        </tr>
                                        </thead>
                                        <tbody id="tbody">
                                        <tr role="row" class="odd" >

                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script layout:fragment="js" th:inline="javascript">
    $(document).ready(function (){
        let oddId = [[${odrId}]];
        $.ajax({
            type:"POST",
            url:"/crm/api/customer/getOrders",
            data:{oddId:oddId},
            success:function (data){
                console.log(data);
                $("#tbody").html("");
                var td = "";
                var dataJSON = JSON.parse(data);
                    td += "<tr role=\"row\" class=\"odd\"><td tabindex=\"0\" class=\"sorting_1\" >"+dataJSON.product.prodName+"</td>";
                    td += "<td>"+dataJSON.ordersLine.oddCount+"</td>";
                    td += "<td>"+dataJSON.product.prodUnit+"</td>";
                    td += "<td>"+dataJSON.product.prodPrice+"</td>";
                    td += "<td>"+(dataJSON.product.prodPrice * dataJSON.ordersLine.oddCount)+"</td>";
                $("#tbody").html(td);

                let frm = document.forms[0];
                frm.odrId.value = dataJSON.ordersLine.oddId;
                frm.odrDate.value = utc2beijing(dataJSON.orders.odrDate);
                frm.odrCustomer.value = dataJSON.orders.odrAddr;
                frm.sum.value = (dataJSON.product.prodPrice * dataJSON.ordersLine.oddCount);
                if(dataJSON.product.odrStatus == 5){
                    frm.odrStatus.value = "已付款";
                }else{
                    frm.odrStatus.value = "已回款";
                }
            },
            error:function (data){
                alert("对不起，获取数据失败！");
            }
        })

        function utc2beijing(utc_datetime) {
            // 转为正常的时间格式 年-月-日 时:分:秒
            var T_pos = utc_datetime.indexOf('T');
            var Z_pos = utc_datetime.indexOf('Z');
            var year_month_day = utc_datetime.substr(0,T_pos);
            var hour_minute_second = utc_datetime.substr(T_pos+1,Z_pos-T_pos-1);
            var new_datetime = year_month_day+" "+hour_minute_second; // 2017-03-31 08:02:06

            // 处理成为时间戳
            timestamp = new Date(Date.parse(new_datetime));
            timestamp = timestamp.getTime();
            timestamp = timestamp/1000;

            // 增加8个小时，北京时间比utc时间多八个时区
            var timestamp = timestamp+8*60*60;

            // 时间戳转为时间
            var beijing_datetime = new Date(parseInt(timestamp) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
            return beijing_datetime; // 2017-03-31 16:02:06
        }
    });
</script>
</html>